<template>
	<view>
		<view class="sys-notice-list" v-if="sysMsgs.length>0">
			<view class="list-cell" v-for="(message, index) in sysMsgs" @click="viewMessage(message)">
				<view class="title">
					<text>{{ message.title }}</text>
				</view>
				<view class="des">
					<u-parse :content="message.content"></u-parse>
					<!-- <text>{{ message.content }}</text> -->
				</view>
				<view class="date">
					<text>{{ message.date }}</text>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<u-empty mode="car" :marginTop="50" text="暂无数据" icon="/static/images/common/empty.png"></u-empty>
		</view>

	</view>

</template>

<script>
	import {
		getNoticeList
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pagination: {
					pageSize: 5, // 步长
					pageNum: 1, // 页码
				},
				sysMsgs: [] //数组
			};
		},
		onLoad() {
			this.getSysNotice()
		},
		onPullDownRefresh() {
			this.getSysNotice()
		},
		methods: {
			viewMessage(msg) {
				uni.navigateTo({
					url: './noticedetails?noticeid=' + msg.id
				})
			},
			formatArray(arr) {
				return arr.map(item => {

					const date = new Date(item.updateTime);
					const timeFormat = uni.$u.timeFormat;
					let timeValue = timeFormat(date, 'yyyy-mm-dd hh:MM:ss');

					return {
						id: item.id,
						title: item.title,
						content: item.content,
						date: timeValue,
					}
				})
			},
			getSysNotice() {
				const data = {
					"pageSize": this.pagination.pageSize,
					"pageNum": this.pagination.pageNum,
					"orderByColumn": "",
					"isAsc": "",
				};
				getNoticeList(data).then(res => {
					this.pageNum++;
					this.sysMsgs = this.sysMsgs.concat(this.formatArray(res.data.rows))
					console.log("this.sysMsgs: " + JSON.stringify(this.sysMsgs));
				}).catch(err => {

				})
			}
		}

	};
</script>

<style lang="scss">
	page {
		background-color: #f5f6fa;
	}

	.sys-notice-list {
		.list-cell {
			margin: 10px 10px;
			border-radius: 6px;
			background-color: #fff;
			padding: 10px 10px;

			.title {

				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #3A3D4B;
				line-height: 44rpx;

				max-width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.date {

				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #99A1AF;
				line-height: 34rpx;

				margin: 10rpx 0rpx;
			}

			.des {

				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #3A3D4B;
				line-height: 40rpx;

				margin-top: 10rpx;
				max-width: 90%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

		}
	}
</style>